{% extends 'base.html' %}

{% block head %}
    <script>
        {#    怎么遍历所有的checkbox??#}
        function total() {
            var value = 0;  //商品数量
            var total_price = 0.00;  //商品总额
            var total_num = 0;  //商品总数量

            {#            $('.cart_list_td').each(function () {#}
            {#                value++;#}
            {#                console.log('hellow')#}
            {#                var unit = $(this).children('.col05').children('span').html(),#}
            {#                    nums = $(this).children().find('.num_show').val();#}
            {#                unit = parseFloat(unit);#}
            {#                nums = parseInt(nums);#}
            {#                console.log(unit + 'unit');#}
            {#                console.log(nums + 'nums');#}
            {#                    var unit_total = (unit *nums).toFixed(2);#}
            {#                var unit_total = (unit * nums);#}
            {#                $(this).children().find('.col07').html(unit_total.toFixed(2) + '元');#}
            {##}
            {##}
            {#                //如果选中,那么才执行总额相加相减#}
            {#                if ($(this).children().find('.col01 input').is(':checked')) {#}
            {#                    total_price += unit_total;#}
            {#                    total_num += nums;#}
            {#                }#}


            $("input[type=checkbox]").not('#total_check').each(function (i, n) {  //i为遍历值,n为当前对象
                value++;
                var unit = $('#' + (i + 1)).find('.col05 span').html(),
                    nums = $('#' + (i + 1)).find('.num_show').val();
                console.log(unit + 'unit');
                console.log(nums + 'nums');
                unit = parseFloat(unit);
                nums = parseInt(nums);
                var unit_total = (unit * nums).toFixed(2);
                var unit_total = (unit * nums);
                $('#' + (i + 1)).find('.col07').html(unit_total.toFixed(2) + '元');


                //如果选中,那么才执行总额相加相减
                if ($('#' + (i + 1)).find('.col01 input').is(':checked')) {
                    total_price += unit_total;
                    total_num += nums;
                }
                {##}
                {##}
                {#                });#}
                {#            console.log(total_price);#}

                $('.settlements em').html(total_price.toFixed(2));


                $('.settlements b').html(total_num);

                {#            alert(value);#}
                {#  上面value取的值刚好是遍历所有商品的值,这个值可以填充到全部商品最上面那里           #}
                $('.total_count em').html(value);
            });
        }

            //给删除按钮绑定一个点击事件
            //这里怎么绑定id呢?
            {#            $('.cart_list_td .col08').click(function () {#}
            {#                $.post('/cart/del/',{'id':$(this).val()},function (data) {#}
            {#                    if(data.isdelete == 1){#}
            {#                        alert('删除不成功,请重试');#}
            {#                    }else {#}
            {#                    //需要把当前标签删除,$this是没用的#}
            {#                        var id = $(this).children().find('span').html();#}
            {#                        console.log(id);#}
            {#                        $('#'+id).remove();#}
            {#                        total();#}
            {#                    }#}
            {##}
            {#                })#}
            {#            });#}


            function delete_cart(id, forloop_count) {
                $.post('/cart/del/', {'id': id}, function (data) {
{#                    total();#}
                    if (data.isdelete == 1) {
                        alert('删除不成功,请重试');
                    } else {
                        //需要把当前标签删除,$this是没用的
                        //删除时最后一个删掉的时候,还是有信息
                        $('#'+forloop_count).remove();



                    }
                    total();

                })
            }

            $(function () {
                total();

                //给所有的checkbox绑定一个选中事件
                $("input[type=checkbox]").not('#total_check').click(function () {

                    //当未被全部选中的时候,全选按钮为不选中
                    if ($("input[type=checkbox]").not('#total_check').length ==
                        $("input[type='checkbox']:checked").not('#total_check').length) {
                        $('#total_check').prop('checked', true);
                    } else {
                        $('#total_check').prop('checked', false);
                    }
                    total()
                });


                //给全选一个点击事件.
                $('#total_check').click(function () {
                    if ($('#total_check').prop('checked')) {
                        $("input[type=checkbox]").not('#total_check').prop('checked', true);
                    } else {
                        $("input[type=checkbox]").not('#total_check').prop('checked', false);
                    }
                    total()
                });


            })


    </script>


{% endblock head %}


{% block body %}
    <div class="total_count">全部商品<em>2</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>

    {% for foo in carts %}

        <ul class="cart_list_td clearfix" id="{{ forloop.counter }}">
            <li class="col01"><input type="checkbox" name="" checked></li>
            <li class="col02"><img src="/static/media/{{ foo.goods.gpic }}"></li>
            <li class="col03">{{ foo.goods.gtitle }}<br><em>{{ foo.goods.gkucun }}</em></li>
            <li class="col04">{{ foo.goods.gunit }}</li>
            <li class="col05"><span id="gprice">{{ foo.goods.gprice }}</span>元</li>
            <li class="col06">
                <div class="num_add">
                    <a href="javascript:;" class="add fl">+</a>
                    <input type="text" class="num_show fl" value={{ foo.count }}>
                    <a href="javascript:;" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">元</li>
            <li class="col08" value="{{ foo.id }}" id="delete"><a href="javascript:delete_cart({{ foo.id }},{{ forloop.counter }});">删除</a>
            </li>
        </ul>
    {% endfor %}



    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" checked="" id="total_check"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>0.00</em><br>共计<b>0</b>件商品</li>
        <li class="col04"><a href="place_order.html">去结算</a></li>
    </ul>

{% endblock body %}